<template>
  <div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
            <el-form-item label="姓名">
              <el-input v-model="sizeForm.fileName" style="margin-left: 80px; width: 90%"></el-input>
            </el-form-item>
            <el-form-item label="电子邮件">
              <el-input v-model="sizeForm.email" style="margin-left: 80px; width: 90%"></el-input>
            </el-form-item>
            <el-form-item label="政治面貌">
              <el-select v-model="value2" placeholder="请选择" style="margin-left: 80px; width: 90%">
                <el-option v-for="item in politicsStatus" :key="item.value2" :label="item.label" :value="item.value2">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="value3" placeholder="请选择" style="margin-left: 80px; width: 90%">
                <el-option v-for="item in status" :key="item.value3" :label="item.label" :value="item.value3">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门">
              <el-select v-model="value4" placeholder="请选择" style="margin-left: 80px; width: 90%">
                <el-option v-for="item in department" :key="item.value4" :label="item.label" :value="item.value4">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="岗位">
              <el-input v-model="sizeForm.station" style="margin-left: 80px; width: 90%"></el-input>
            </el-form-item>
            <el-form-item label="入职时间">
              <el-date-picker v-model="sizeForm.entryTime" type="date" placeholder="选择日期" style="margin-left: 80px; width: 90%">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="sizeForm.phone" style="margin-left: 80px; width: 90%"></el-input>
            </el-form-item>
            <el-form-item label="合同截止">
              <el-date-picker v-model="sizeForm.cancellingDate" type="date" placeholder="选择日期" style="margin-left: 80px; width: 90%">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="劳动合同（已签署）">
              <el-upload class="laborContractRenewal"
                :auto-upload="false"
                :on-change="handleChange" :file-list="fileList">
                <el-button size="small" type="plain" style="margin-left: 80px">附件上传</el-button>
              </el-upload>
            </el-form-item>

            <el-form-item size="large">
              <el-button type="primary" @click="onSubmit" style="margin-left: -60px; margin-top: 20px">立即创建</el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { addPersonnel } from '../../api/personnel'
import {upload} from '../../utils/upload'
import moment from 'moment';
export default {

  data() {
    return {
      activeName: "first",
      sizeForm: {
        fileName: "",
        status: "",
        department: "",
        entryTime: "",
        phone: "",
        email: "",
        photograph: "",
        station: "",
        cancellingDate: "",
        laborContractRenewal: "",
        politicsStatus: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      
      politicsStatus: [
        {
          value2: "选项1",
          label: "群众",
        },
        {
          value2: "选项2",
          label: "团员",
        },
        {
          value2: "选项3",
          label: "党员",
        },
        {
          value2: "选项4",
          label: "其他",
        },
      ],
      value2: "",
      status: [
        {
          value3: "选项1",
          label: "在职",
        },
        {
          value3: "选项2",
          label: "离职",
        },
        {
          value3: "选项3",
          label: "外包",
        },
        {
          value3: "选项3",
          label: "外聘",
        },
      ],
      value3: "",
      department: [
        {
          value4: "选项1",
          label: "销售部",
        },
        {
          value4: "选项2",
          label: "财务部",
        },
        {
          value4: "选项3",
          label: "研发部",
        },
        {
          value4: "选项4",
          label: "人事部",
        },
        {
          value4: "选项5",
          label: "采购部",
        },
      ],
      value4: "",
    
    };
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-1);
      upload(file.raw)
      // this.displayImage(file.raw)
    },
    onCancel() {
      this.$router.push("/personnel/personnel");
    },
  
  onSubmit(){
        let data = {
          fileName: this.sizeForm.fileName,
          status: this.value3,
          department: this.value4,
          entryTime: moment(this.sizeForm.entryTime).format('YYYY-MM-DD'),
          phone: this.sizeForm.phone,
          email: this.sizeForm.email,
          photograph: this.photograph,
          station: this.sizeForm.station,
          cancellingDate: moment(this.sizeForm.cancellingDate).format('YYYY-MM-DD'),
          laborContractRenewal: this.laborContractRenewal,
          politicsStatus: this.value2,
        };
        // let date = moment(this.sizeForm.entryTime).format('YYYY-MM-DD');
        console.log(data);
        addPersonnel(data).then(res => {
          console.log(res);
          if (res.code === 200) {
          this.$message.success('新增成功');
          this.$router.push("/personnel/personnel");
          } else {
          this.$message.error('新增失败');
          }
        })
      }

},
  
};
</script>

<style></style>